<template>
    <div class="distributeRole">
      <el-button type="text" size="small" @click="distribute()">分配角色</el-button>
      <el-dialog title="分配角色" v-model="dialogFormVisible" :close-on-click-modal="false" >
          <el-checkbox-group v-model="checkList">
              <el-checkbox v-for="items in roleList" :label="items.id" :key="items.name" style="width:10rem;text-align: left;">{{items.name}}</el-checkbox>
          </el-checkbox-group>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel" class="cancel">取 消</el-button>
          <el-button type="primary" @click="submit" class="submit">确定</el-button>
        </div>
      </el-dialog>
    </div>
</template>
<script>
  export default{
      props:['id'],
      data(){
          return {
            dialogFormVisible:false,
            checked:true,
            roleList:[],
            checkList:[]
          }
      },
      created(){
      },
      methods:{
          distribute(){
            this.$http.get('/api-web/v1/api/userRole/list?curPage=0&pageSize=10000000')
              .then((response)=>{
                let data=response.body;
                this.roleList=data.result;
                this.dialogFormVisible=true
              },(err)=>{
              });
            this.$http.get('/api-web/v1/api/user/assignRoles?userId='+this.id)
              .then((response)=>{
                let data=response.body;
                this.checkList=data.result;
                let arr=[];
                for(let key in data.result){
                    arr.push(data.result[key].id)
                }
                this.checkList=arr;
              })
          },
         cancel(){
              this.dialogFormVisible=false;
         },
         submit(){
               let json={
                   roleIds:this.checkList,
                   userId:this.id
               };
              this.$http.post('/api-web/v1/api/user/assignRoles',json)
                .then((response)=>{
                  let data=response.body;
                  console.log(data);
                },(err)=>{

                });
              this.dialogFormVisible=false;
         }
      }
  }
</script>
<style>

</style>
